<script setup>
    import dayjs from 'dayjs'
    import { computed, ref, reactive } from 'vue'
    import Type from '@components/search/type'
    import Search from '@components/search/index'
    import PageWrapper from '@components/PageWrapper.vue'
    import { common, service } from '@utils'
    import TitleValue from '@components/TitleValue'
    import { useRoute } from 'vue-router'
    import { usePremission } from '@hooks'
    import Detail from './Detail'
    import { View } from '@element-plus/icons-vue'
    import store, { STORE_KEY } from '@store'

    const activeName = ref('报表')

    const radioType = ref('1')

    const data = ref()

    const route = useRoute()

    const premission = usePremission({
        view: 'bfqz:order:view'
    })

    let queryForm = reactive({
        time: []
    })
    let end = new Date().getTime()
    let start = new Date().getTime() - 3600 * 1000 * 24 * 6
    end = dayjs(end).format('YYYY-MM-DD 23:59:59')
    start = dayjs(start).format('YYYY-MM-DD 00:00:00')
    queryForm.time = [start, end]
    const searchs = ref([
        {
            type: Type.DATE_RANGE,
            width: 8,
            key: 'time',
            default: queryForm.time
        },
        // {
        //     type: Type.INPUT,
        //     key: 'name',
        //     width: 5,
        //     placeholder: '商户名'
        // },
        // {
        //     type: Type.SELECT,
        //     key: 'state',
        //     width: 5,
        //     placeholder: '订单类别',
        //     valueKey: 'val',
        //     data: []
        // },
        // {
        //     type: Type.SELECT,
        //     key: 'stageState',
        //     width: 5,
        //     placeholder: '订单状态',
        //     valueKey: 'val',
        //     data: []
        // },
        {
            width: 6,
            type: Type.SEARCH_BUTTON
        }
    ])

    const pageRef = ref()

    const tableRef = ref()

    const detailRef = ref()

    const riskRef = ref()

    const expressMethods = ref()

    const expressCompanys = ref()

    const yesNo = ref()

    const sonStatuss = ref()

    const statuss = ref()

    const companyCode = computed(() => store.getters.user)

    const numLine = ref(1)
    const onLineNum = (num) => {
        numLine.value = num
    }

    const onSearch = (param) => {
        queryForm = param
        pageRef.value.refresh()
    }

    const getData = async ({ pageNum, pageSize }, cb) => {
        const query = { ...queryForm }
        if (query.time && query.time.length > 0) {
            query.rentStartTime = query.time[0]
            query.rentEndTime = query.time[1]
            delete query.time
        }
        query.companyCode = companyCode.value.companyCode
        const res = await service.statics.consume(query)
        cb(res)
    }

    const getStatuss = async () => {
        const res = await service.sys.dictionaryAll()
        if (res) {
            // let statuss = null
            let edpService = null
            for (let i = 0; i < res.length; i++) {
                if (res[i].code === 'sonOrderState') {
                    sonStatuss.value = res[i].list
                } else if (res[i].code === 'fastMail') {
                    expressMethods.value = res[i].list
                } else if (res[i].code === 'fastMailCompany') {
                    expressCompanys.value = res[i].list
                } else if (res[i].code === 'yesNo') {
                    res[i].list.forEach((item) => {
                        item.val === 'true' && (item.val = true)
                        item.val === 'false' && (item.val = false)
                    })
                    yesNo.value = res[i].list
                } else if (res[i].code === 'edp-service') {
                    edpService = res[i].list
                }
            }
            // searchs.value[3].data = statuss
            // searchs.value[2].data = edpService
        }
    }

    const getDataStatements = async () => {
        let query = {
            rentStartTime: new Date(),
            rentEndTime: new Date(),
            companyCode: companyCode.value.companyCode
        }
        const res = await service.statics.consume(query)
        data.value = res
    }
    const handleClick = (tab, event) => {
        console.log(tab, event)
    }
    // getDataStatements()

    getStatuss()

    const setTypeRadio = (val) => {
        onSearch()
    }
    const width = (function (premission) {
        let width = 24
        premission.view && (width += 33 * 2)
        return Math.max(width, 72)
    })(premission)
</script>
<template>
    <section class="main-white">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="报表" name="报表">
                <!-- <el-row :gutter="16" v-if="data" class="paddingX30">
                    <el-col :span="24">
                        <title-value
                            :w="100"
                            :Color="'#000000'"
                            style="justify-content: center; font-weight: 900; font-size: 20px"
                            title="资金统计"
                        />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="结算金额: " :value="data.payPrice" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="待结算金额: " :value="data.overduePrice" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="账户余额: " :value="data.normalWaitPayRent" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="押金金额: " :value="data.todayPay" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="成功体现金额: " :value="data.todayNoPay" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="收益金额: " :value="data.totalSettle" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="广告位花费: " :value="data.paySettle" />
                    </el-col>
                </el-row>
                <el-row :gutter="16" v-if="data" class="paddingX30">
                    <el-col :span="24">
                        <title-value
                            :w="100"
                            :Color="'#000000'"
                            style="justify-content: center; font-weight: 900; font-size: 20px"
                            title="商品统计 "
                        />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="在用中商品: " :value="data.waitPaySettle" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="待确认商品: " :value="data.waitPaySettle" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="使用过期商品: " :value="data.todayPaySettle" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="待发货商品: " :value="data.todayWaitPaySettle" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="超48H待发货商品: " :value="data.noSend" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="上架数: " :value="data.noSend" />
                    </el-col>
                </el-row>
                <el-row :gutter="16" v-if="data" class="paddingX30">
                    <el-col :span="24">
                        <title-value
                            :w="100"
                            :Color="'#000000'"
                            style="justify-content: center; font-weight: 900; font-size: 20px"
                            title="订单客户统计 "
                        />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="订单数: " :value="data.todayPaySettle" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="匹配客户数: " :value="data.todayWaitPaySettle" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="成交客户数: " :value="data.noSend" />
                    </el-col>
                    <el-col :span="6">
                        <title-value title="已发货数: " :value="data.noSend" />
                    </el-col>
                </el-row>
                <el-row :gutter="16" v-if="data" class="paddingX30">
                    <el-col :span="24">
                        <title-value
                            :w="100"
                            :Color="'#000000'"
                            style="justify-content: center; font-weight: 900; font-size: 20px"
                            title="合计："
                            :value="data.todayPaySettle"
                        />
                    </el-col>
                </el-row> -->
                <search :items="searchs" @filter="onSearch" @onLineNum="onLineNum" on-load />
                <page-wrapper @get-data="getData" ref="pageRef" :on-load="false">
                    <template v-slot:default="props">
                        <el-row :gutter="16" v-if="props.tableData.records" class="paddingX30">
                            <el-col :span="12">
                                <title-value title="时间周期: " :value="props.tableData.records.dataTime" />
                            </el-col>
                            <el-col :span="6">
                                <title-value title="客户数量: " :value="props.tableData.records.countMember" />
                            </el-col>
                            <el-col :span="6">
                                <title-value title="下单数量: " :value="props.tableData.records.countOrder" />
                            </el-col>
                            <el-col :span="6">
                                <title-value
                                    title="首期租金支付成功数量: "
                                    :value="props.tableData.records.countFirstPayedAll"
                                />
                            </el-col>
                            <el-col :span="6">
                                <title-value
                                    title="首期押金支付成功数量: "
                                    :value="props.tableData.records.countFirstPayedDeposit"
                                />
                            </el-col>
                            <el-col :span="6">
                                <title-value title="首期金额: " :value="props.tableData.records.firstPayed" />
                            </el-col>
                            <el-col :span="6">
                                <title-value
                                    title="设备已发货数量: "
                                    :value="props.tableData.records.countDeviceOut"
                                />
                            </el-col>
                            <el-col :span="6">
                                <title-value
                                    title="首期设备标地总价值: "
                                    :value="props.tableData.records.marketPriceAll"
                                />
                            </el-col>
                            <el-col :span="6">
                                <title-value title="逾期客户数量: " :value="props.tableData.records.countOverMember" />
                            </el-col>
                            <el-col :span="6">
                                <title-value title="逾期笔数: " :value="props.tableData.records.countOverOrder" />
                            </el-col>
                            <el-col :span="6">
                                <title-value title="逾期总金额: " :value="props.tableData.records.overTotalPrice" />
                            </el-col>
                            <!-- <el-col :span="6">
                <title-value title="坏账客户数量: " :value="data.countDeadMember" />
            </el-col>
            <el-col :span="6">
                <title-value title="坏账笔数: " :value="data.countDeadOrder" />
            </el-col>
            <el-col :span="6">
                <title-value title="坏账总金额: " :value="data.deadTotalPrice" />
            </el-col> -->
                        </el-row>
                    </template>
                </page-wrapper>
            </el-tab-pane>
            <!-- 1 == 商品数据 -->
            <!-- 2 == 订单数据 -->
            <!-- 3 == 投诉数据 -->
            <!-- 4 == 供应链 -->
            <!-- 5 == 售后数据 -->
            <!-- <el-tab-pane label="数据" name="数据">
                <el-radio-group
                    v-model="radioType"
                    @change="setTypeRadio"
                    style="margin-bottom: 20px"
                >
                    <el-radio label="1" size="small" border>商品数据</el-radio>
                    <el-radio label="2" size="small" border>订单数据</el-radio>
                    <el-radio label="3" size="small" border>投诉数据</el-radio>
                    <el-radio label="4" size="small" border>供应链</el-radio>
                    <el-radio label="5" size="small" border>售后数据</el-radio>
                </el-radio-group>
                <search :items="searchs" @filter="onSearch" @onLineNum="onLineNum" on-load />
                <page-wrapper @get-data="getData" ref="pageRef" :on-load="false">
                    <template v-slot:default="props">
                        <vxe-table
                            ref="tableRef"
                            :loading="props.loading"
                            :data="props.tableData.records"
                            :max-height="common.tableHeight(true, numLine, 147)"
                            highlight-hover-row
                            round
                            stripe
                            border
                        >
                            <vxe-column type="seq" width="50" fixed="left"></vxe-column>
                            <span v-if="radioType == 1">
                                <vxe-column field="id" title="加盟商名称" width="150" />
                                <vxe-column field="userId" title="sku编码" width="150" />
                                <vxe-column field="userName" title="商品编码" width="80" />
                                <vxe-column field="userId" title="商品名称" width="120" />
                                <vxe-column field="deposit" title="商品图片" width="80" />
                                <vxe-column field="freeDeposit" title="物流服务" width="80" />
                                <vxe-column
                                    field="goodsContent"
                                    title="租期产品"
                                    show-overflow="tooltip"
                                    width="160"
                                />
                                <vxe-column field="pay" title="总租金" width="100" />
                                <vxe-column field="price" title="产品签约价值" width="100" />
                                <vxe-column field="overduePrice" title="买断设备" width="80" />
                                <vxe-column field="rentStartTime" title="到期还设备" width="160" />
                                <vxe-column field="rentEndTime" title="是否续租" width="160" />
                                <vxe-column
                                    field="createDate"
                                    title="碎屏、意外、基础保修服务"
                                    width="120"
                                />
                                <vxe-column field="createDate" title="投诉数量" width="160" />
                                <vxe-column field="createDate" title="供应链采购数量" width="120" />
                                <vxe-column field="createDate" title="供应链采购金额" width="120" />
                                <vxe-column
                                    field="createDate"
                                    title="供应链采购售后数量"
                                    width="140"
                                />
                                <vxe-column field="createDate" title="供应链售后运费" width="120" />
                            </span>
                            <span v-if="radioType == 2">
                                <vxe-column field="id" title="加盟商名称" width="150" />
                                <vxe-column field="id" title="订单编号" width="150" />
                                <vxe-column field="userId" title="商品名称" width="120" />
                                <vxe-column field="deposit" title="商品图片" width="80" />
                                <vxe-column field="deposit" title="商品规格" width="80" />
                                <vxe-column field="deposit" title="下单时间" width="80" />
                                <vxe-column field="deposit" title="租赁信息" width="80" />
                                <vxe-column field="deposit" title="押金" width="80" />
                                <vxe-column field="deposit" title="租金支付" width="80" />
                                <vxe-column field="deposit" title="联系人" width="80" />
                                <vxe-column field="deposit" title="联系人电话" width="100" />
                                <vxe-column field="deposit" title="联系人地址" width="100" />
                                <vxe-column field="deposit" title="产品类型" width="80" />
                                <vxe-column field="deposit" title="订单来源" width="80" />
                                <vxe-column field="deposit" title="渠道号" width="80" />
                                <vxe-column field="deposit" title="订单状态" width="80" />
                                <vxe-column title="操作" width="50" fixed="right">
                                    <template #default="{ row }">
                                        <section class="flex-align flex-wrap">
                                            <el-tooltip
                                                v-if="premission.view"
                                                effect="dark"
                                                content="详情"
                                                placement="top"
                                                :enterable="false"
                                            >
                                                <el-button
                                                    type="primary"
                                                    circle
                                                    plain
                                                    :icon="View"
                                                    size="small"
                                                    @click="detailRef.open(row)"
                                                ></el-button>
                                            </el-tooltip>
                                        </section>
                                    </template>
                                </vxe-column>
                            </span>
                            <span v-if="radioType == 3">
                                <vxe-column field="createDate" title="被投诉商户" width="120" />
                                <vxe-column field="createDate" title="投诉时间" width="106" />
                                <vxe-column field="createDate" title="工单号" width="160" />
                                <vxe-column field="createDate" title="订单号" width="160" />
                                <vxe-column field="userId" title="商品名称" width="120" />
                                <vxe-column field="createDate" title="联系电话" width="100" />
                                <vxe-column field="createDate" title="客户投诉" width="120" />
                                <vxe-column field="createDate" title="说明" width="160" />
                                <vxe-column field="createDate" title="投诉类型" width="100" />
                                <vxe-column field="createDate" title="状态" width="100" />
                                <vxe-column field="createDate" title="最后操作人" width="120" />
                                <vxe-column field="createDate" title="最后操作时间" width="108" />
                            </span>
                            <span v-if="radioType == 4">
                                <vxe-column field="createDate" title="采购单号" width="160" />
                                <vxe-column field="userId" title="sku编码" width="160" />
                                <vxe-column field="userName" title="商品编码" width="160" />
                                <vxe-column field="userId" title="商品名称" width="160" />
                                <vxe-column field="deposit" title="商品图片" width="80" />
                                <vxe-column field="createDate" title="类目" width="160" />
                                <vxe-column field="createDate" title="供货价" width="160" />
                                <vxe-column field="createDate" title="采购数量" width="160" />
                                <vxe-column field="createDate" title="结算总结" width="160" />
                            </span>
                            <span v-if="radioType == 5">
                                <vxe-column field="createDate" title="售后单号" width="100" />
                                <vxe-column field="createDate" title="采购单号" width="100" />
                                <vxe-column field="createDate" title="售后类型" width="100" />
                                <vxe-column field="userId" title="sku编码" width="150" />
                                <vxe-column field="userName" title="商品编码" width="80" />
                                <vxe-column field="userId" title="商品名称" width="120" />
                                <vxe-column field="deposit" title="商品图片" width="80" />
                                <vxe-column field="createDate" title="类目" width="100" />
                                <vxe-column field="createDate" title="申请数量" width="100" />
                                <vxe-column field="createDate" title="申请时间" width="108" />
                                <vxe-column field="createDate" title="售后状态" width="100" />
                                <vxe-column field="createDate" title="售后运费" width="100" />
                            </span>
                        </vxe-table>
                    </template>
                </page-wrapper>
                <detail
                    ref="detailRef"
                    :sonStatuss="sonStatuss"
                    :yesNo="yesNo"
                    :expressMethods="expressMethods"
                    :expressCompanys="expressCompanys"
                    :edpService="searchs[2].data"
                />
            </el-tab-pane> -->
        </el-tabs>
    </section>
</template>
<style lang="scss" scoped>
    :deep(.el-button + .el-button) {
        margin-left: 10px;
    }
    :deep(.el-radio) {
        margin-right: 20px;
    }
</style>
